#gameB #game {
    display: flex;
    flex-direction: column;
    align-items: center;
    // display: none;

    .game-swiper {
        width: 100%;

        .type {
            width: 100%;

            img {
                width: 100%;
                object-fit: cover;
            }
        }

        .swiper-pagination-bullet {
            border-radius: unset;
            background-color: #fff;
            opacity: 1;
        }

        .swiper-pagination-bullet-active {
            background-color: #fcac45;
        }
    }

    .team1 {
        width: 70%;
        display: flex;
        justify-content: space-between;

        .left {
            width: 30%;

            .hot {
                width: 2.5rem;
                height: 6.25rem;
                background-color: #e14738;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 1.25rem;
                color: #fff;
                position: relative;

                p {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }

                .sanjiao {
                    width: 0;
                    height: 0;
                    border-bottom: 10px solid #fff;
                    border-left: 20px solid transparent;
                    border-right: 20px solid transparent;
                    position: absolute;
                    bottom: 0;
                }
            }
        }

        .right {
            width: 60%;
            display: flex;
            flex-direction: column;
            margin-top: 1.875rem;

            .one {
                font-size: 1.75rem;
                display: flex;
                justify-content: flex-end;
                color: #2a2a2a;
            }

            .two {
                margin-top: 1.25rem;
                font-size: 1rem;
                color: #ababab;
                line-height: 1.875rem;
                text-align: right;
            }

            .three {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                margin-top: 3.75rem;

                .pic {
                    width: 48%;
                    height: 10rem;
                    background-image: url(/image/image/91154045_p0.jpg);
                    background-repeat: no-repeat;
                    background-size: cover;
                    border-radius: 5px;
                    margin-bottom: 1.875rem;
                }
            }
        }
    }

    .team2 {
        width: 70%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 3.75rem;

        .left {
            width: 60%;
            height: 100%;
            display: flex;
            flex-direction: column;
            margin-top: 1.875rem;

            .one {
                font-size: 1.75rem;
                display: flex;
                justify-content: flex-start;
                color: #2a2a2a;
            }

            .two {
                margin-top: 1.25rem;
                font-size: 1rem;
                color: #ababab;
                line-height: 1.875rem;
                text-align: left;
            }

            .three {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                margin-top: 3.75rem;

                .pic {
                    width: 48%;
                    height: 10rem;
                    background-image: url(/image/image/91154045_p0.jpg);
                    background-repeat: no-repeat;
                    background-size: cover;
                    border-radius: 5px;
                    margin-bottom: 1.875rem;
                }
            }
        }

        .right {
            width: 30%;
        }
    }

    .team3 {
        width: 70%;
        margin-top: 7.5rem;

        .tips {
            font-size: 2.5rem;
            color: #222;
        }

        .type {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            text-align: center;
            justify-content: space-between;

            .types {
                width: 32%;

                .pic {
                    width: 89%;
                    margin-top: 2.5rem;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    overflow: hidden;

                    .hezi {
                        width: 100%;
                        height: 100%;
                        background-color: rgba(0, 0, 0, 0.5);
                        position: absolute;
                        top: 10rem;
                        display: flex;
                        justify-content: center;

                        p {
                            color: #fff;
                            width: 90%;
                        }
                    }
                }

                .hezi:hover {
                    top: 0;
                    transition: 2s linear;
                }


                p {
                    margin-top: .9375rem;
                    font-size: 1rem;
                    color: #767676;
                    margin-bottom: 2.5rem;
                }
            }
        }
    }
}


@media screen and (max-width:768px) {
    #game {
        .team1 {
            flex-direction: column;

            .right {
                width: 100%;
                margin-top: -2rem;
                justify-content: flex-start;

                .three {
                    width: 100%;
                    flex-wrap: wrap;
                }
            }
        }

        .team2 {
            flex-direction: column-reverse;

            .left {
                width: 100%;
                margin-top: -2rem;
                justify-content: flex-start;

                .three {
                    width: 100%;
                    flex-wrap: wrap;
                }
            }

            .right {
                justify-content: flex-end;
            }
        }
    }
}